<!-- 渠道添加和渠道详情组件 -->
<template>
    <el-form :model="ruleForm" :disabled="detailsDis" :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
        <el-header>{{title}}</el-header>
        <el-divider content-position="left">基础信息</el-divider>

        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="公司名称" prop="companyName">
                    <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="行业类型" prop="tradeType">
                    <el-select v-model="ruleForm.tradeType" placeholder="请选择行业类型" style="width: 205px;">
                        <el-option label="金融业" value="金融业"></el-option>
                        <el-option label="保险业" value="保险业"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="所在地区" prop="area">
                    <el-cascader size="large" :options="options" v-model="selectedOptions">
                    </el-cascader>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">

            <el-col :span="6">
                <el-form-item label="邮编" prop="postalCode">
                    <el-input v-model="ruleForm.postalCode" placeholder="请输入邮政编码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="业务联系人" prop="transactionPerson">
                    <el-input v-model="ruleForm.transactionPerson" placeholder="请输入业务联系人"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="职位" prop="position">
                    <el-input v-model="ruleForm.position" placeholder="请输入职位"></el-input>
                </el-form-item>
            </el-col>

        </el-row>
        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="手机号码" prop="transactionPhone">
                    <el-input v-model="ruleForm.transactionPhone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="QQ" prop="qqNumber">
                    <el-input v-model="ruleForm.qqNumber" placeholder="请输入qqNumber号码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
            <el-col :span="22">
                <el-form-item label="后台域名" prop="manageDomain">
                    <el-input v-model="ruleForm.manageDomain" placeholder="请输入管理后台域名"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-divider content-position="left">公司详情</el-divider>

        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="公司LOGO" prop="logo">
                <image-preview v-if="channel==2" :src="ruleForm.logo" :width="150" :height="150"/>
                <image-upload  v-if="channel==1 || channel==3" v-model="ruleForm.logo"/>
            </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-form-item label="传真" prop="fax">
                    <el-input v-model="ruleForm.fax" placeholder="请输入传真"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="电话" prop="companyPhone">
                    <el-input v-model="ruleForm.companyPhone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item label="网址" prop="url">
                    <el-input v-model="ruleForm.url" placeholder="请输入网址"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
            <el-col :span="9"></el-col>
            <el-col :span="15">
                <el-form-item label="公司介绍" prop="companyIntroduction">
                    <el-input type="textarea" v-model="ruleForm.companyIntroduction" style="width: 700px;"
                        maxlength="300" show-word-limit placeholder="请输入公司介绍"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-divider content-position="left">财务信息</el-divider>

        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="税号" prop="dutyParagraph">
                    <el-input v-model="ruleForm.dutyParagraph" placeholder="请输入税号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="发票抬头" prop="invoiceHeader">
                    <el-input v-model="ruleForm.invoiceHeader" placeholder="请输入发票抬头"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="开户银行" prop="bankDeposit">
                    <!-- <el-input v-model="ruleForm.bankDeposit" placeholder="请输入开户银行"></el-input> -->
                    <el-select v-model="ruleForm.bankDeposit" placeholder="请输入开户银行">
                        <el-option label="中国农业银行" value="中国农业银行"></el-option>
                        <el-option label="中国工商银行" value="中国工商银行"></el-option>
                        <el-option label="中国建设银行" value="中国建设银行"></el-option>
                        <el-option label="中国银行" value="中国银行"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="银行账号" prop="bankAccount">
                    <el-input v-model="ruleForm.bankAccount" placeholder="请输入银行账户"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="电话号码" prop="companyPhone">
                    <el-input v-model="ruleForm.companyPhone" placeholder="请输入电话号码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="单位地址" prop="address">
                    <el-input v-model="ruleForm.address" placeholder="请输入单位地址"></el-input>
                </el-form-item>
            </el-col>
        </el-row>


        <el-divider content-position="left">其它信息</el-divider>
        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="编码" prop="enCode">
                    <el-input v-model="ruleForm.enCode" placeholder="请输入编码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="渠道对接人" prop="ourTransactionPerson">
                    <el-select v-model="ruleForm.ourTransactionPerson" placeholder="请选择业务联系人员" style="width: 205px;">
                        <el-option label="肖迦南" value="肖迦南"></el-option>
                        <el-option label="魏仕界" value="魏仕界"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="级别" prop="level">
                    <el-select v-model="ruleForm.level" placeholder="请选择客户级别" style="width: 205px;">
                        <el-option label="A" value="A"></el-option>
                        <el-option label="B" value="B"></el-option>
                        <el-option label="C" value="C"></el-option>
                        <el-option label="D" value="D"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-form-item label="合作签约日" prop="signingTime">
                    <el-date-picker type="date" placeholder="请选择日期" v-model="ruleForm.signingTime"
                        style="width: 205px;">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="备注信息" prop="note">
                    <el-input v-model="ruleForm.note" placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6"></el-col>

        </el-row>

        <el-row type="flex" justify="space-around">

            <el-form-item>
                <el-button v-if="channel==1" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button v-if="channel==3" type="primary" @click="submitForm('ruleForm')">确认编辑</el-button>
                <el-button v-if="channel==1" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-row>
    </el-form>


</template>

<script>

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import {addChannel,updateChannel,findById} from "@/api/credit/crechannel.js"
import { log } from 'console';

export default {
    data() {
        return {
            // 路由参数判断图片显示和数据的展示1:修改图片；2.详情展示图片
            channel:'1',
            // 详情页禁止修改
            detailsDis:false,
            //标题传过来
            title: "编辑渠道",
            // 编辑和查询的id
            updataSelectID:'',
            // 区域
            options: regionData,
            // 地域数组
            selectedOptions: '',
            ruleForm: {
                id: '',
                companyName: '',
                tradeType: '',
                area: '',
                postalCode: '',
                transactionPerson: '',
                ourTransactionPerson: '',
                position: '',
                transactionPhone: '',
                qqNumber: '',
                email: '',
                address: '',
                manageDomain: '',
                logo: '',
                companyPhone: '',
                fax: '',
                url: '',
                companyIntroduction: '',
                dutyParagraph: '',
                invoiceHeader: '',
                bankDeposit: '',
                bankAccount: '',
                enCode: '',
                signingTime: '',
                level: '',
                status: '',
                source: '',
                note:'',

            },
            
            rules: {
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                tradeType: [
                    { required: true, message: '请选择行业类型', trigger: 'blur' },
                ],
                transactionPhone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                manageDomain: [
                    { required: true, message: '请输入管理后台域名', trigger: 'blur' },
                    {
                        pattern: /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/,
                        message: "请输入正确的域名",
                        trigger: "blur"
                    }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                companyPhone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                // logo: [
                //     { required: true, message: '请选择LOGO', trigger: 'blur' },
                // ],
                dutyParagraph: [
                    { required: true, message: '请输入税号', trigger: 'blur' },
                ],
                invoiceHeader: [
                    { required: true, message: '请输入发票抬头', trigger: 'blur' },
                ],
                bankDeposit: [
                    { required: true, message: '请输入开户银行', trigger: 'blur' },
                ],
                bankAccount: [
                    { required: true, message: '请输入银行卡号', trigger: 'blur' },
                    {
                        pattern: /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17})$/,
                        message: "银行卡号不符合规范，应为15~18位纯数字",
                        trigger: "blur"
                    }
                ],
                enCode: [
                    { required: true, message: '请输入客户编号', trigger: 'blur' },
                ],
                ourTransactionPerson: [
                    { required: true, message: '请选择业务联系人', trigger: 'blur' },
                ],
                level: [
                    { required: true, message: '请选择客户级别', trigger: 'blur' },
                ],
                selectedOptions: [
                    { required: true, message: '请选择地区', trigger: 'blur' }
                ],
                signingTime: [
                    {  required: true, message: '请选择合作签约时间', trigger: 'change' }
                ],
            }
        };
    },
    created(){
        if(this.$route.query.title=='添加渠道'){
            this.title = '添加渠道';
        }

        // 编辑
        if(this.$route.params.data!=undefined){
            this.channel = '3';
            this.updataSelectID=this.$route.params.data;
            this.getList();
        }
        // 查看详情
        if(this.$route.params.detailsSelect!=undefined){
            // 路由参数判断图片显示和数据的展示1:修改图片；2.详情展示图片
            this.channel='2',
            // 详情页禁止修改
            this.detailsDis=true,
            // 修改titil
            this.title = '渠道详情';
            // 查询id
            this.updataSelectID=this.$route.params.detailsSelect;
            this.getList();
        }
        
    },
    methods: {
        getList(){
            
            findById(this.updataSelectID).then(res=>{
            this.ruleForm.companyName=res.data.companyName;
            this.ruleForm.tradeType=res.data.tradeType;
            this.ruleForm.area=res.data.area;
            // 区域转码
            let oldArea = new Array();
            let addCh = this.ruleForm.area.split(" ");
            oldArea.push(TextToCode[addCh[0]].code);
            oldArea.push(TextToCode[addCh[0]][addCh[1]].code);
            if (addCh[2] != undefined) {
                oldArea.push(TextToCode[addCh[0]][addCh[1]][addCh[2]].code);
            }
            this.selectedOptions = oldArea
            

             
             this.ruleForm.postalCode=res.data.postalCode;
             this.ruleForm.transactionPerson=res.data.transactionPerson;
             this.ruleForm.position=res.data.position;
             this.ruleForm.transactionPhone=res.data.transactionPhone;
             this.ruleForm.qqNumber=res.data.qqNumber;
             this.ruleForm.email=res.data.email;
             this.ruleForm.manageDomain=res.data.manageDomain;
             this.ruleForm.logo=res.data.logo;
             this.ruleForm.address=res.data.address;
             this.ruleForm.fax=res.data.fax;
             this.ruleForm.companyPhone=res.data.companyPhone;
             this.ruleForm.url=res.data.url;
             this.ruleForm.companyIntroduction=res.data.companyIntroduction;
             this.ruleForm.dutyParagraph=res.data.dutyParagraph;
             this.ruleForm.invoiceHeader=res.data.invoiceHeader;
             this.ruleForm.bankDeposit=res.data.bankDeposit;
             this.ruleForm.bankAccount=res.data.bankAccount;
             this.ruleForm.companyPhone=res.data.companyPhone;
             this.ruleForm.address=res.data.address;
             this.ruleForm.enCode=res.data.enCode;
             this.ruleForm.ourTransactionPerson=res.data.ourTransactionPerson;
             this.ruleForm.level=res.data.level;
             this.ruleForm.signingTime=res.data.signingTime;
             this.ruleForm.note=res.data.note;
            })
            
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //alert('submit!');
                    // 处理area
                     // 编码转中文区域
                    let regional_code = this.selectedOptions
                    let newarea = new Array();
                    for (const i of regional_code) {
                        newarea.push(CodeToText[i])
                    }
                    this.ruleForm['area'] = newarea.join(" ")
                    if(this.title=='添加渠道'){
                        console.log(this.ruleForm);
                        addChannel(this.ruleForm).then(res=>{
                        console.log(res);
                    //跳转提交成功页面
                    this.$router.push({name:'/succ'})

                    })
                    }
                   else if(this.title=='编辑渠道'){
                    this.ruleForm.id = this.updataSelectID
                    updateChannel(this.ruleForm).then(res=>{
                        console.log(res);
                        
                        //跳转提交成功页面
                    this.$router.push({name:'/succ'})
                    })
                   }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
}
</script>

<style>
.el-header {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 70px;
}
</style>